<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模态框</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style></style>
</head>

<body>
<!--按钮-->
 <a href="#mymodal" class="btn btn-primary" data-toggle="modal">点击按钮触发弹框</a>
<!--<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">点击按钮触发弹框2</button>-->
<!-- data-toggle:字面理解是数据切换，意思就是我们要触发什么事件 -->
<!-- data-target:字面理解是数据目标，意思是我们具体触发哪一个 -->


<!--弹出的模态框-->
<div id="mymodal" class="modal fade"><!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
    <div class="modal-dialog"><!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
        <div class="modal-content"><!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">我是标题</h4>
            </div>
            <div class="media-body">
                <p>  我是内容。。。。</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>

</div>



<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.js'></script>
<script>
    //  默认弹出（激活弹窗）
    /* $('.modal').modal();*/
</script>
</body>
</html>